<!-- 失物招领 -->
<template>
  <div class="yiels" v-if="yiels">
    <myheader :title="titles" rightBtn="主页" @updataInfo="submitRecruit"></myheader>
    <van-swipe lazy-render>
      <van-swipe-item
        style="height:200px;"
        v-for="(items,indexs)  in  imgList "
        :key="indexs"
        @click.stop="bigImg(indexs)"
        fit="contain"
      >
        <van-image :src="items" class="swip_img lostFound_Ul_li_lostFound_img">
          <template v-slot:loading>
            <van-loading size="20px" vertical>加载中...</van-loading>
          </template>
        </van-image>
      </van-swipe-item>
    </van-swipe>

    <div v-show="imgList.length!=0" class="decs">
      <!--商品详情  -->
      <van-row class="goodesDerail">
        <p style="width:100%;">商品：{{yiels.content}}</p>
        <p>
          价格:
          <span style="font-size:0.6rem;">{{formatprice(yiels.price)}}</span>
        </p>
        <span>原来价格:</span>
        <span class="van-card__origin-price">{{formatprice(yiels.originalPrice)}}</span>
      </van-row>
      <van-contact-card type="edit" :name="name" :tel="phone" :editable="false" />
    </div>
    <!-- 底部购物车 -->
    <div v-show="imgList.length!=0">
      <van-collapse v-model="activeNames">
        <van-collapse-item title="收货地址" name="1" icon="location-o">
          <van-field
            v-model="address"
            rows="1"
            autosize
            label="地址"
            type="textarea"
            placeholder="请输入收货地址"
          />

          <van-cell value="购物数量">
            <!-- 使用 title 插槽来自定义标题 -->
            <template #right-icon>
              <van-stepper v-model="num" min="1" integer :max="yiels.amount" />
            </template>
          </van-cell>
        </van-collapse-item>
      </van-collapse>

      <van-action-bar>
        <van-action-bar-button type="danger" text="立即购买" @click="payMeony" />
      </van-action-bar>
    </div>
    <!-- 弹出框 -->
  </div>
</template>

<script>
import myheader from '../../../comon/myheader.vue'
import Chart from '../../../comon/chart.vue'
import { Dialog, Notify, Toast } from 'vant'
import { ImagePreview } from 'vant'
export default {
  components: {
    myheader,
    Chart,
  },

  data() {
    return {
      yiels: [],
      title: '', // 标题
      name: '', // 商家姓名
      phone: '', // 商家联系方式
      empty: false, // 空图片
      address: '',
      activeNames: ['1'],
      num: 1,
      imgList: [],
    }
  },
  created() {
    this.init()
  },
  computed: {
    titles() {
      return '转让物品:' + this.title
    },
  },

  methods: {
    formatprice(val) {
      return '￥' + val
    },
    async init() {
      const res = await this.$axios.get('/goods/info/' + this.$route.params.id)
      if (res.data.code == 200) {
        this.yiels = res.data.data
        this.name = res.data.data.user.username
        this.phone = res.data.data.user.phone
        this.title = this.yiels.title
        this.address = this.yiels.user.address
        this.imgList = this.yiels.imgList
      }
    },

    // 支付宝沙箱支付
    //支付账号:nwnppd2252@sandbox.com
    // 支付密码 :111111
    payMeony() {
      if (!this.$store.getters.getUserInfo) {
        Toast('请先登录才能购买呦 (づ￣3￣)づ╭❤～')
        this.$router.push('/login')
      } else if (this.address == '') {
        Notify({ type: 'warning', message: '亲~您还没有填写收货地址哟！' })
      } else {
        Dialog.confirm({
          title: '购物提示',
          message:
            '确认购买' +
            this.yiels.title +
            '数量' +
            this.num +
            '需要支付' +
            this.yiels.price * this.num +
            '元',
        })
          .then(() => {
            // on confirm
            //  [this.yiels.id]:1
            this.$axios
              .post(
                '/order/alipay',

                JSON.stringify({
                  goodsMap: { [this.yiels.id]: this.num.toString() },
                  address: this.address,
                  userId: this.$store.getters.getUserInfo.id.toString(),
                })
              )
              .then((resp) => {
                // 添加之前先删除一下，如果单页面，页面不刷新，添加进去的内容会一直保留在页面中，二次调用form表单会出错
                const divForm = document.getElementsByTagName('div')
                if (divForm.length) {
                  document.body.removeChild(divForm[0])
                }
                const div = document.createElement('div')
                div.innerHTML = resp.data // data就是接口返回的form 表单字符串
                document.body.appendChild(div)
                document.forms[0].setAttribute('target', '_blank') // 新开窗口跳转
                document.forms[0].submit()
              })
          })
          .catch(() => {
            // on cancel
          })
      }
    },

    // 大图
    bigImg(indexs) {
      ImagePreview({
        images: this.imgList, // 预览图片的那个数组
        loop: false,
        closeable: true,
        startPosition: indexs, // 指明预览第几张图
      })
    },
    submitRecruit() {
      this.$router.push('/home')
    },
  },
}
</script>

<style scoped>
.yiels {
  margin-top: 46px;
  margin-bottom: 80px;
}

.van-cell {
  font-size: 17px !important;
}
.goodesDerail p {
  font-size: 0.4rem;
  text-indent: 2em;
  padding: 5px;
}
.goodesDerail span {
  font-size: 0.4rem;
  padding: 14px 3px;
}

.edit-address {
  color: #1989fa;
}
</style>
